﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="ASP_FORMS.Login" %>
<%@ OutputCache  Location="None" NoStore="true" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>Practice - Form Authentication</title>
    <script type='text/javascript' src='Scripts/jquery-1.8.1.min.js'></script>
    <script type='text/javascript' src='Scripts/jquery-ui-1.8.23.min.js'></script>
    <script type='text/javascript' src='Scripts/jquery.validate.min.js'></script>
    <link rel='Stylesheet' href='Content/themes/hot-sneaks/jquery-ui-1.8.23.custom.css' />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#auth-container").accordion({ autoHeight: false, header: "h3", icons: { header: 'ui-icon-triangle-1-e', headerSeleted: 'ui-icon-triangle-1-s' }, event: 'click', collapsible: true });
            $("input:button, input:submit, button").button();
            $("#btn_Login").click(function () {
                //Custom Attribute for Validators
                $.validator.addMethod("password", function (value, element, regex) {
                    var regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/;
                    return this.optional(element) || regex.test(value);
                }, "Passwords are 8-16 characters with uppercase letters, lowercase letters and at least one number.");

                $("#form1").validate({
                    errorClass: 'invalid',
                    focusInvalid: true,
                    messageClass: 'error',
                    position: 'bottom center',
                    speed: 'slow',
                    errorElement: 'em',
                    wrapper: 'li',
                    errorLabelContainer: '.form-status ul',
                    errorContainer: '.form-status',
                    errorPlacement: function (error, element) {
                        error.appendTo('.form-status');
                    },
                    highlight: function (element, errorClass) {
                        $(element).addClass('highlight');
                    },
                    unhighlight: function (element, errorClass) {
                        $(element).removeClass('highlight');
                    },
                    invalidHandler: function (form, validator) {
                        $("#lbl_status li").remove();
                        $(".form-status ul li").each(function () { $(this).remove(); });
                    },                    
                    rules: {
                        txt_Username: {
                            required: true
                        },
                        txt_Password: {
                            required: true,
                            password: true
                        }
                    },

                    messages: {
                        txt_Username: {
                            required: 'Username Required.'
                        },
                        txt_Password: {
                            required: 'Password Required'
                        }
                    }
                });
            });
        });
    </script>
    <link rel="Stylesheet" href="Styles/site.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div id="container">
            <div id="auth-container">
                <h3><a>Login Here..!</a></h3>
                <div id="login-form">
                    <div class="form-row">
                        <span class="form-label">                        
                            <asp:Label ID="lbl_Username" runat="server">Username</asp:Label></span> <span class="form-col-sep">
                                <asp:Label ID="Label1" runat="server">:</asp:Label></span> <span class="form-field">
                                    <asp:TextBox ID="txt_Username" runat="server" CssClass="txtBox"></asp:TextBox>
                                </span>
                    </div>
                    <div class="form-row">
                        <span class="form-label">
                            <asp:Label ID="lbl_Password" runat="server">Password</asp:Label></span> <span class="form-col-sep">
                                <asp:Label ID="Label2" runat="server">:</asp:Label></span> <span class="form-field">
                                    <asp:TextBox ID="txt_Password" runat="server" TextMode="Password" CssClass="txtBox"></asp:TextBox>
                                </span>
                    </div>                    
                    <div class="form-row-btn">
                    <asp:Button ID="btn_Register" runat="server" Text="Register" OnClick="btn_Register_Click" CssClass="btnSubmit" CausesValidation="false" />
                        <asp:Button ID="btn_Login" runat="server" Text="Login" OnClick="btn_Login_Click" CssClass="btnSubmit" CausesValidation="true" />
                    </div>
                    <div class="form-status">
                        <ul>
                            <asp:Label ID="lbl_status" runat="server"></asp:Label>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
